<template>
  <div class="style">
    <h3>欢迎来到合同录入</h3>
    <template>
      <el-tabs v-model="activeName">
        <el-tab-pane label="合同信息" name="first">
          <el-form :inline="true" :model="contractForm" class="demo-form-inline">

            <h3>房产信息</h3>
            <el-button type="warning" plain @click="findHouse">选择房产</el-button>
            <hr/>


            <el-form-item label="*小区名称">
              <el-input disabled v-model="contractForm.houseName"></el-input>
            </el-form-item>

            <el-form-item label="*房产信息">
              <el-input disabled v-model="contractForm.premiseName"></el-input>
            </el-form-item>
            <br/>


            <el-form-item label="*所有权类型">
              <el-select v-model="contractForm.houseType" placeholder="请选择所有权类型" style="width: 170px">
                <el-option label="国有房产" value=1></el-option>
                <el-option label="直管房产" value=2></el-option>
                <el-option label="自管房产" value=3></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="*房产证编号">
              <el-input v-model="contractForm.houseZsNo"></el-input>
            </el-form-item>
            <br>


            <el-form-item label="*产权地址">
              <el-input v-model="contractForm.cqAddress"></el-input>
            </el-form-item>


            <h3>业主信息</h3>
            <hr>

            <el-form-item label="*业主姓名">
              <el-input v-model="contractForm.ownerName" style="width: 100px"></el-input>
            </el-form-item>
            <br/>
            <el-form-item>
              <el-radio v-model="contractForm.signWithOwner" label="0">是签约人</el-radio>
              <el-radio v-model="contractForm.signWithOwner" label="1">不是签约人</el-radio>
            </el-form-item>

            <el-form-item>
              <el-select v-model="contractForm.certificateType" placeholder="证件类型" style="width: 120px">
                <el-option label="身份证" value="0"></el-option>
                <el-option label="港澳台通行证" value="1"></el-option>
              </el-select>
            </el-form-item>
            <br/>
            <el-form-item label="*业主证件号码">
              <el-input v-model="contractForm.ownerIdCard" placeholder="请添加业主证件号码"></el-input>
            </el-form-item>
            <br>


            <el-form-item label="*业主手机号">
              <el-input v-model="contractForm.ownerMobile" placeholder="请添加业主手机号"></el-input>
            </el-form-item>
            <br/>
            <el-form-item label="*业主联系地址">
              <el-input v-model="contractForm.ownerContactAddress" placeholder="请添加业主联系地址"></el-input>
            </el-form-item>
            <br>


            <el-form-item label="*签约人">
              <el-input v-model="contractForm.signUserName" placeholder="请添加签约人姓名"></el-input>
            </el-form-item>
            <br/>


            <el-form-item>
              <el-select v-model="contractForm.certificateType" placeholder="证件类型" style="width: 120px">
                <el-option label="身份证" value="0"></el-option>
                <el-option label="港澳台通行证" value="1"></el-option>
              </el-select>
            </el-form-item>

            <el-form-item label="*签约人证件号码">
              <el-input v-model="contractForm.signUserIdCard" placeholder="请添加签约人证件号码"></el-input>
            </el-form-item>
            <br>


            <el-form-item label="*签约人手机号">
              <el-input v-model="contractForm.signUserMobile" placeholder="请添加签约人手机号"></el-input>
            </el-form-item>
            <br/>

            <el-form-item label="*紧急联系电话">
              <el-input v-model="contractForm.signUserEmergencyPhone" placeholder="请添加紧急联系电话"></el-input>
            </el-form-item>
            <br>


            <el-form-item label="账户类型">
              <el-select v-model="contractForm.accountType" placeholder="账户类型" @change="choosedetail">
                <el-option label="对公账户" value="1"></el-option>
                <el-option label="对私账户" value="2"></el-option>
              </el-select>
            </el-form-item>

            <br/>
            <el-form-item label="*开户省份">
              <el-input v-model="contractForm.accountName" placeholder="请添加开户省份"></el-input>
            </el-form-item>
            <br>

            <el-form-item label="*银行名称">
              <el-input v-model="contractForm.bankName" placeholder="请添加银行名称"></el-input>
            </el-form-item>

            <el-form-item label="*开户支行" v-show="flag">
              <el-input v-model="contractForm.bankOpen" placeholder="请添加开户支行"></el-input>
            </el-form-item>
            <br>

            <el-form-item label="*联行行号" v-show="flag">
              <el-input v-model="contractForm.bankBranchCodeLh" placeholder="请添加联行行号"></el-input>
            </el-form-item>

            <el-form-item label="*账户姓名">
              <el-input v-model="contractForm.yname" placeholder="请添加账户姓名"></el-input>
            </el-form-item>
            <br>

            <el-form-item label="*银行卡号">
              <el-input v-model="contractForm.bankCardNumber" placeholder="请添加银行卡号"></el-input>
            </el-form-item>

            <h3>租约信息</h3>
            <hr>

            <el-form-item label="*租约期限">
              <el-date-picker
                v-model="contractForm.leaseStartTime"
                type="date"
                value-format="yyyy-MM-dd"
                placeholder="选择日期">
              </el-date-picker>
              至
              <el-date-picker
                v-model="contractForm.leaseEndTime"
                type="input"
                value-format="yyyy-MM-dd"
                disabled
                placeholder="结束日期">
              </el-date-picker>
              <span class="gap">
            <el-button @click="changeYear(1)">一年</el-button>
            <el-button @click="changeYear(2)">二年</el-button>
            <el-button @click="changeYear(3)">三年</el-button>
            <el-button @click="changeYear(4)">四年</el-button>
            <el-button @click="changeYear(5)">五年</el-button>
            </span>
            </el-form-item>
            <br>

            <el-form-item label="*租金">
              <el-input v-model="contractForm.monthRent" placeholder="请输入" style="width: 200px"></el-input>
            </el-form-item>
            <br/>

            <el-form-item label="*房产押金">
              <el-input v-model="contractForm.depositMoney" placeholder="请输入" style="width: 200px"></el-input>
            </el-form-item>
            <br/>


            <el-form-item label="*支付方式">
              押
              <el-input-number v-model="depositType" :step="1" :min="1" :max="3" step-strictly
                               @change="handleChanged"></el-input-number>
              付
              <el-input-number v-model="paymentType" :step="1" :min="1" :max="6" step-strictly
                               @change="handleChangep"></el-input-number>

            </el-form-item>
            <br/>

            <el-form-item>
              <el-button type="primary" @click="saveContract">下一步</el-button>
            </el-form-item>
          </el-form>

        </el-tab-pane>


        <el-tab-pane label="付款计划预览" name="third">
          <el-table
            :data="tableData"
            style="width: 100%">
            <el-table-column
              prop="payNumber"
              label="序号"
             >
              <template slot-scope="scope">
                第{{scope.row.payNumber}}期
              </template>

            </el-table-column>
            <el-table-column
              prop="payableDate"
              label="应付日期"
              >
            </el-table-column>

            <el-table-column
              prop="paymentAmount"
              label="金额">
              <template v-slot="scope">
              {{scope.row.flag ? '押金'+scope.row.paymentAmount : scope.row.paymentAmount}}
              </template>
            </el-table-column>

            <el-table-column
              prop="tax"
              label="税费"
             >
            </el-table-column>

            <el-table-column
              prop="payState"
              label="付款状态"
             >
              <template v-slot="scope">
              {{scope.row.skStatus == 1 ? '未支付' : scope.row.skStatus == 2 ? '已支付' : scope.row.skStatus == 3 ? '已中止' : '已冻结'}}
            </template>
            </el-table-column>


            <el-table-column
              label="房产租金周期"
              >
              <template v-slot="scope">
              {{scope.row.paymentDaysBegin + '至' + scope.row.paymentDaysEnd}}
              </template>
            </el-table-column>
          </el-table>
          <el-button @click="nextStep">下一步</el-button>
        </el-tab-pane>
      </el-tabs>
    </template>


    <!--    点击弹出房产信息-->
    <el-dialog title="房源信息" :visible.sync="controlHouseTable">
      <el-form :model="form">
        <el-form-item label="小区名称" :label-width="formLabelWidth">
          <el-input v-model="form.premiseName" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="租房类型" :label-width="formLabelWidth">
          <el-select v-model="form.leaseTypeId" placeholder="请选择">
            <el-option label="整租" value="0"></el-option>
            <el-option label="合租" value="1"></el-option>
            <el-option label="公寓" value="2"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button @click="findHouse">查询</el-button>
        </el-form-item>
      </el-form>
      <el-table :data="houseData">
        <el-table-column property="roomName" label="房产信息" width="300">
          <template v-slot="scope">
          {{scope.row.premiseName}}{{'('+scope.row.roomName+')'}}
          </template>
        </el-table-column>
        <el-table-column property="roomHall" label="居室" width="200"></el-table-column>
        <el-table-column property="leaseTypeName" label="租房类型"></el-table-column>
        <el-table-column
          fixed="right"
          label="操作"
          width="100">
          <template slot-scope="scope">
            <el-button @click="chooseHouse(scope.row)">选中</el-button>
          </template>
        </el-table-column>
      </el-table>
      <!--    分页-->
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="pageNum"
        :page-sizes="[10, 20, 30]"
        :page-size="pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total">
      </el-pagination>
    </el-dialog>
  </div>
</template>

<script>
import * as sf from '@/api/harvest/sf.js';
import ContractSign from "./ContractSign";

export default {
  name: "index",
  components: {ContractSign},
  data() {
    return {
      activeName: "first",
      contractForm: {
        leaseStartTime:'',
        leaseEndTime:'',
        payMentltems:[]
      },//合同表
      //房产信息开关
      controlHouseTable: false,
      houseData: [],//房产表格信息
      total: 0,
      pageSize: 10,
      pageNum: 1,
      flag: false,
      num: 0,
      form: {},
      formLabelWidth: '150px',
      depositType: 1,
      paymentType: 1,
      tableData:[],
      countMonth: 12
    }
  },
  methods: {
    nextStep(){
      this.contractForm.payMentltems = this.tableData;
      sf.saveContract(this.contractForm);
      this.$router.push({name: 'ContractSign', params:{contractForm:this.contractForm}});
    },
    changeYear(num){
      this.countMonth = num * 12;
      this.contractForm.countMonth = this.countMonth;
      console.log(this.contractForm.countMonth);
      if (!this.contractForm.leaseStartTime){
        this.$message.warning("起始时间不能为空");
      }
      let startTime = new Date(this.contractForm.leaseStartTime);
      let year = startTime.getFullYear()+num;
      let month = startTime.getMonth()+1;
      let day = startTime.getDate();
      if (month < 10){
        month = '0' + month;
      }
      if (day < 10){
        day = '0' + day;
      }
      this.contractForm.leaseEndTime =  year+'-'+month+'-'+day;
    },
    handleChanged(val){
      this.contractForm.depositType = val;
    },
    handleChangep(val){
      this.contractForm.paymentType = val;
    },
    handleSizeChange(val) {
      this.pageSize = val;
      this.findHouse();
    },
    handleCurrentChange(val) {
      this.pageNum = val;
      this.findHouse();
    },
    //这个不是保存
    saveContract() {
      sf.checkContract(this.contractForm).then(res=>{
        if (res.code == 200){
          sf.generatePayMentPlan(this.contractForm).then(res=>{
            this.tableData = res.data;
            this.activeName = 'third';
          })
        }else {
          this.$message.error(res.msg);
        }
      })
    },
    //查找房产信息
    findHouse() {
      sf.selHouse(this.form, this.pageNum, this.pageSize).then(res => {
        this.total = res.data.total;
        this.houseData = res.data.list;
      })
      this.controlHouseTable = true;
    },
    //账户类型的选择
    choosedetail(row) {
      if ("1" == row) {
        this.flag = true;
      } else {
        this.flag = false;
      }
    },
    //选中房产
    chooseHouse(row) {
      this.contractForm.premiseName = row.roomName;
      this.contractForm.houseName = row.premiseName;
      this.controlHouseTable = false;
    }
  }
}
</script>

<style scoped>
.style {
  margin-left: 100px;
}

.gap {
  margin: 100px;
}
</style>
